<template>
  <div class="head-background-color">
    <div class="head-content-left">
      <div class="head-logo-setup">
        <div class="head-logo-word-about">
          智慧工厂
        </div>
      </div>
    </div>
    <div class="head-content-center">
      &nbsp;
    </div>
    <div class="head-content-right">
		<div class="mr10 debug_right">
			<el-popover
				ref="popover"
				title=""
				width="150"
				trigger="hover"
				v-model="flag_state">
				<div class="debug_item100">
				<div class="debug_row_center">
					<div class="debug_item60 pt5">
					<el-button size="mini" type="primary" @click="logout()">登出</el-button>
					</div>
				</div>
				</div>
				<img src="/static/img/user.jpg" style="width: 36px; height: 36px; border-radius: 18px;" slot="reference" >
			</el-popover>
		</div>
    </div>
  </div>
  
</template>
<script>
export default {
  name: "eduHeader",
  data() {
    return {
      flag_state: false,
      show3: false
    };
  },
  computed: {
    userInfo: function() {
      return this.store.get(this.STORECONST.USERINFO);
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      this.ajax({
        url: this.API.common.logout,
        data: {},
        success: resultData => {
          this.$message.success("登出成功");
          this.store.remove(this.STORECONST.USERINFO);
          this.$router.go(0);
        }
      });
    }
  }
};
</script>

<style scoped>
.head-background-color {
  float: left;
  width: 100%;
  height: 66px;
  background-color: #409eff;
}
.head-content-left {
  float: left;
  width: 20%;
}
.head-content-center {
  float: left;
  width: 67%;
}
.head-content-right {
  float: left;
  width: 13%;
}
.head-logo-setup {
  float: left;
  width: 100%;
}
.head-logo-englishWord-about {
  float: left;
  width: 40%;
  color: #fff;
  font-size: 25px;
  font-weight: bold;
  margin-top: -15px;
  text-align: right;
}
.head-logo-img-about {
  float: left;
  width: 40%;
  text-align: right;
  padding-top: 5px;
}
.head-logo-word-about {
  float: left;
  width: 60%;
  color: #fff;
  font-size: 20px;
  margin-top: -15px;
  text-align: center;
}
.head-btn {
  margin-top: -10px;
}
.transition-box {
  margin-bottom: 5px;
  width: 150px;
  height: 40px;
  border-radius: 4px;
  background-color: #29a176;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  line-height: 30px;
  font-size: 15px;
}
.mesbox-word-position {
  padding-top: 5px;
}
.head-sign {
  color: #fff;
  font-size: 20px;
  margin-top: -15px;
}
.el-header {
  padding: 0px;
}
.el-aside {
  line-height: 0px;
}
.el-main {
  line-height: 0px;
  padding: 0px;
}
</style>